<template>
  <el-card shadow="hover" v-if="article">
    <el-row slot="header" class="clearfix" type="flex">
      <el-col :span="9"
        ><router-link
          :to="{ name: 'User', params: { id: article.author_detail.id } }"
          tag="a"
          class="no-underline"
        >
          <el-avatar
            shape="square"
            :src="article.author_detail.avatar"
            :alt="article.author_detail.nickname"
          ></el-avatar>
          {{ article.author_detail.nickname | nicknameEllipsis }}</router-link
        >
      </el-col>
      <el-col :span="9"
        ><span class="datetime">{{
          article.last_modified_at | datetimeFormatter
        }}</span></el-col
      >
    </el-row>
    <div v-if="!detail">
      {{ article.content | ellipsis }}
      <router-link
        :to="{ name: 'Article', params: { id: article.id } }"
        class="no-underline mini-text"
        >查看详细</router-link
      >
      <!-- 点赞数和评论数 -->
      <el-row style="padding-top: 1em" class="mini-text">
        <el-col :span="4"
          ><div>
            <i
              :class="thumbUped ? 'fa fa-thumbs-up' : 'fa fa-thumbs-o-up'"
              style="color: orange"
            ></i>
            {{ thumbUpAmt }}
          </div></el-col
        >
        <el-col :span="4">{{ article.comment_count }} 条评论</el-col>
        <el-col :span="4">收藏数 {{ article.liked_by.length }}</el-col>
        <el-col :span="4" v-if="unlikable"
          ><el-link
            type="danger"
            @click="like"
            :underline="false"
            style="font-size: 0.8em"
            >取消收藏 <i class="fa fa-trash-o"></i></el-link
        ></el-col>
        <el-col :span="4" v-if="deletable"
          ><el-link
            type="danger"
            @click="deleteArticle"
            :underline="false"
            style="font-size: 0.8em"
            >删除 <i class="fa fa-trash-o"></i></el-link
        ></el-col>
      </el-row>
    </div>
    <!-- article detail and comment list -->
    <div v-else>
      <div style="white-space: pre-wrap;">{{ article.content }}</div>
      <!-- <div v-html="article.content"></div> -->
      <div class="is-bottom white-box">
        <el-row>
          <el-col :span="12" :offset="4">
            <i
              :class="
                thumbUped
                  ? 'fa fa-thumbs-up pointer'
                  : 'fa fa-thumbs-o-up pointer'
              "
              style="color: orange"
              @click="thumbUp"
            ></i>
          </el-col>
          <el-col :span="8">{{ thumbUpAmt }}</el-col>
        </el-row>
        <el-row style="margin-top: 0.5em; display: flex; align-items: flex-end">
          <el-col :span="12" :offset="4">
            <i
              :class="liked ? 'fa fa-star pointer' : 'fa fa-star-o pointer'"
              style="color: orange"
              @click="like"
            ></i>
          </el-col>
          <el-col :span="8">{{ likedByAmt }}</el-col>
        </el-row>
      </div>
      <el-divider content-position="left"
        >评论列表
        <span v-if="article.comment_count"
          >({{ article.comment_count }})</span
        ></el-divider
      >
      <CommentForm
        :articleId="article.id"
        style="padding-bottom: 2em"
      ></CommentForm>
      <comment-list
        :articleId="article.id"
        :key="$store.state.commentListKey"
      ></comment-list>
    </div>
  </el-card>
  <div v-else>get no article</div>
</template>

<script>
import CommentForm from '@/components/CommentForm.vue';
import CommentList from '@/components/CommentList.vue';

export default {
  props: {
    article: { type: Object },
    detail: { type: Boolean, default: false },
    unlikable: { type: Boolean, default: false },
    deletable: { type: Boolean, default: false },
  },
  components: {
    CommentList,
    CommentForm,
  },
  filters: {
    ellipsis: (val) => {
      if (val.length > 10) {
        return `${val.slice(0, 11)}...`;
      }
      return val;
    },
  },
  computed: {
    thumbUpAmt: {
      get() {
        if (this.article.thumbuped_by != null) {
          return this.article.thumbuped_by.split(';').length;
        }
        return 0;
      },
    },
    thumbUped() {
      if (this.article.thumbuped_by != null) {
        const userId = localStorage.getItem('id');
        return this.article.thumbuped_by.split(';').indexOf(userId) != -1;
      }
      return false;
    },
    liked() {
      return (
        this.article.liked_by.indexOf(parseInt(localStorage.getItem('info')))
        != -1
      );
    },
    likedByAmt() {
      return this.article.liked_by.length;
    },
  },
  methods: {
    thumbUp() {
      this.$http.post(`articles/${this.article.id}/thumbup/`).then((res) => {
        if (this.thumbUped) {
          this.$message({
            message: '取消点赞',
            type: 'success',
            duration: 1000,
          });
        } else {
          this.$message({
            message: '点赞成功',
            type: 'success',
            duration: 1000,
          });
        }
        this.$emit('updateArticle', res.data);
      });
    },
    like() {
      let action = '/like/';
      if (this.liked) {
        action = '/unlike/';
      }
      this.$http.post(`articles/${this.article.id}${action}`).then((res) => {
        if (this.liked) {
          this.$message({
            message: '取消收藏',
            type: 'success',
            duration: 1000,
          });
        } else {
          this.$message({
            message: '收藏成功',
            type: 'success',
            duration: 1000,
          });
        }
        this.$emit('updateArticle', res.data);
      });
    },
    deleteArticle() {
      const { id } = this.article;
      this.$http.delete(`articles/${id}/`).then((res) => {
        this.$message({ message: '删除成功', type: 'success', duration: 1000 });
        this.$emit('deleteArticle', `delete${id}`);
      });
    },
  },
};
</script>

<style>
.datetime {
  color: grey;
  font-size: 0.6em;
  display: block;
  text-align: right;
}
.no-underline {
  text-decoration: none;
}

.mini-text {
  font-size: 0.8em;
}
.is-bottom {
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 0;
}
.white-box {
  box-sizing: border-box;
  box-shadow: 0 -1px 3px rgba(26, 26, 26, 0.5);
  padding: 10px;
  border-radius: 2px;
  width: 6em;
}
.pointer:hover {
  cursor: pointer;
}
</style>
